import type React from 'react';
import './index.scoped.less';
import { useRef, useState } from 'react';

function MButton({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [wave, setWave] = useState(false);
  const btnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    const target = e.target as HTMLDivElement;
    const x = `${e.clientX - target.offsetLeft}px`;
    const y = `${e.clientY - target.offsetTop}px`;
    buttonRef.current?.style.setProperty('--left', x);
    buttonRef.current?.style.setProperty('--top', y);
    onClick();
  };

  return (
    <button
      ref={buttonRef}
      className={'my-button' + ` ${wave ? 'hover' : ''}`}
      onClick={btnClick}
      onFocus={() => {
        setWave(true);
      }}
      onBlur={() => {
        setWave(false);
      }}>
      {children}
    </button>
  );
}

export default MButton;
